<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>架位绑定系统</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>
        .layui-table, .layui-table-view {
            margin: 0;
        }

        .layui-form-item {
            margin: 5px 0;
        }

        .layui-input-block {
            width: 89px;
            margin-left: 58px;
        }

        .layui-form-label {
            width: auto;
        }

    </style>
</head>
<body style="background-color: #2C3E50">
<div style="background-color: white;width: 100%">
    <div class="layui-form" style="display: flex;justify-content: flex-start;padding: 0;margin: 0;"
         lay-data="{id: 'fff'}"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <div class="layui-form-item">
            <div style="margin-left: 5px;width:250px" class="layui-input-block">
                <button type="button" id="btnStart" class="layui-btn layui-btn-disabled">开始扫描</button>
                <button type="button" id="btnStop" class="layui-btn layui-btn-disabled">停止</button>
                <button type="button" id="btnClear" class="layui-btn layui-btn-warm">清空</button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">书架</label>
            <div class="layui-input-block">
                <select id="shujia" name="shujia" lay-filter="shujia" lay-search>
                    <option value="0">全部</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">层</label>
            <div class="layui-input-block">
                <select class="layui-select-disabled" id="ceng" name="ceng" lay-filter="ceng" style="width: 150px;"
                        lay-search>
                    <option value="0">全部</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">列</label>
            <div class="layui-input-block">
                <select id="lie" name="lie" lay-filter="lie" style="width: 150px;" lay-search>
                    <option value="0">全部</option>
                </select>
            </div>
        </div>

        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">书名</label>-->
        <!--<div class="layui-input-block" >-->
        <!--<select id="bookName" name="bookName" lay-filter="bookName" style="width: 150px;" lay-search>-->
        <!--<option value="0">全部</option>-->
        <!--</select>-->
        <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">条码</label>
            <div class="layui-input-block">
                <select id="code" name="code" class="12" lay-filter="code" style="width: 150px;" lay-search>
                    <option value="0">全部</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="out" class="layui-btn  layui-btn-danger">退出</button>
            </div>
        </div>

    </div>
</div>
<table style="border: solid red 1px;" class="layui-table" id="Table" lay-filter="test" lay-data="{id: 'idTest'}">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
        <col width="100">
    </colgroup>
    <thead>
    <tr>
        <th lay-data="{width:80, align:'center', toolbar: '#indexID',event:'delete'}">NO</th>
        <th lay-data="{field:'isbn', align:'center', width: 150}">ISBN</th>
        <th lay-data="{field:'code', align:'center', width: 100}">条码</th>
        <th lay-data="{field:'type', align:'center', width: 100}">分类号</th>
        <th lay-data="{field:'selectNumber', align:'center', width: 100}">索取号</th>
        <th lay-data="{field:'bookName', align:'center'}">书名</th>
        <th lay-data="{field:'price', align:'center', width: 100}">价格</th>
        <th lay-data="{field:'location', align:'center', width: 200}">位置</th>
        <th lay-data="{width:100, align:'center', toolbar: '#barDemo1',event:'delete'}">已放置</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    var tDate = new Array();
    layui.use('table', function () {
        var table = layui.table;
        table.reload('idTest', {
            limit: 999999
        });
        tDate = table.cache.idTest;

    });
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getIPandPort',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://" + ip + ":" + port + "/sokect");
    ws.onopen = function () {
        console.log("连接成功")
        $("#connectionStatus").html("连接成功");
        $("#btnStart").removeClass("layui-btn-disabled");
    }
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        console.log(msg);
        if (msg.from == "PDC" && msg.code == 0) {
            for (var i = 0; i < tDate.length; i++) {
                if (msg.book_bar_code == tDate[i].code) {
                    return;
                }
            }
            var d = {
                isbn: msg.book_isbn,
                code: msg.book_bar_code,
                type: msg.sort_id,
                bookName: msg.book_name,
                price: msg.book_price,
                selectNumber: msg.book_call_number,
                location: msg.book_weizhi,
                left: msg.left,
                center: msg.center,
                right: msg.right
            };
            addTr(d);
            addCode(msg.book_bar_code);
            addshujia(msg.left);
            addCeng(msg.center);
            addLie(msg.right);
            // addBookName(msg.book_name);
        }
    };
    ws.onclose = function () {
        layer.alert("socket服务器断了");
        $(".layui-btn").addClass("layui-btn-disabled");
        $("select").attr("disabled", "disabled");
        layui.form.render();
    };

    function addTr(d) {
        console.log("添加一行tDate=" + tDate);
        console.log("添加一行d=" + d);
        layui.use('table', function () {
            var table = layui.table;
            var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                laydate = layui.laydate;
            // var oldDate=new Array();
            tDate.reverse();
            tDate.push(d);
            tDate.reverse();
            // oldDate=table.cache.idTest;
            // console.log("oldDate=table.cache.idTest="+oldDate);
            // oldDate.reverse();
            // oldDate.push(d);
            // console.log("oldDate.push="+oldDate);
            // oldDate.reverse();
            table.reload('idTest', {
                data: tDate,
                idTest: 999999
            });

            console.log("tDate.push(d)=" + tDate);
        });
    }

    function addCode(d) {
        var newCode = new Array();
        var code = $("#code").find("option");
        for (var i = 0; i < code.length; i++) {
            // console.log("正在循环第"+i+"个option="+shujia[i].innerHTML);
            if (d == code[i].innerHTML) {
                return;
            }
            if (code[i].innerHTML == "全部") {
                newCode.push("<option value='0'>" + code[i].innerHTML + "</option>");
            } else {
                newCode.push("<option value='" + code[i].innerHTML + "'>" + code[i].innerHTML + "</option>");
            }
        }
        $("#code").html("");
        for (var i = 0; i < newCode.length; i++) {
            $("#code").append(newCode[i]);
        }
        $("#code").append("<option value='" + d + "'>" + d + "</option>");
        formRender();
    }

    function addshujia(d) {
        var newShujia = new Array();
        var shujia = $("#shujia").find("option");
        for (var i = 0; i < shujia.length; i++) {
            // console.log("正在循环第"+i+"个option="+shujia[i].innerHTML);
            if (d == shujia[i].innerHTML) {
                return;
            }
            if (shujia[i].innerHTML == "全部") {
                newShujia.push("<option value='0'>" + shujia[i].innerHTML + "</option>");
            } else {
                newShujia.push("<option value='" + shujia[i].innerHTML + "'>" + shujia[i].innerHTML + "</option>");
            }
        }
        $("#shujia").html("");
        for (var i = 0; i < newShujia.length; i++) {
            $("#shujia").append(newShujia[i]);
        }
        $("#shujia").append("<option value='" + d + "'>" + d + "</option>");
        formRender();
        // layui.form.render();
    }

    function addCeng(d) {
        var newCeng = new Array();
        var ceng = $("#ceng").find("option");
        for (var i = 0; i < ceng.length; i++) {
            // console.log("正在循环第"+i+"个option="+shujia[i].innerHTML);
            if (d == ceng[i].innerHTML) {
                return;
            }
            if (ceng[i].innerHTML == "全部") {
                newCeng.push("<option value='0'>" + ceng[i].innerHTML + "</option>");
            } else {
                newCeng.push("<option value='" + ceng[i].innerHTML + "'>" + ceng[i].innerHTML + "</option>");
            }
        }
        $("#ceng").html("");
        for (var i = 0; i < newCeng.length; i++) {
            $("#ceng").append(newCeng[i]);
        }
        $("#ceng").append("<option value='" + d + "'>" + d + "</option>");
        formRender();
    }

    function addLie(d) {
        var newLie = new Array();
        var lie = $("#lie").find("option");
        for (var i = 0; i < lie.length; i++) {
            // console.log("正在循环第"+i+"个option="+shujia[i].innerHTML);
            if (lie[i].innerHTML == "全部") {
                newLie.push("<option value='0'>" + lie[i].innerHTML + "</option>");
            } else {
                newLie.push("<option value='" + lie[i].innerHTML + "'>" + lie[i].innerHTML + "</option>");
            }
            if (d == lie[i].innerHTML) {
                return;
            }
        }
        $("#lie").html("");
        for (var i = 0; i < newLie.length; i++) {
            $("#lie").append(newLie[i]);
        }
        $("#lie").append("<option value='" + d + "'>" + d + "</option>");
        formRender();
    }

    function addBookName(d) {
        var bookName = $("#bookName").find("option");
        for (var i = 0; i < bookName.length; i++) {
            // console.log("正在循环第"+i+"个option="+oldDate[i].innerHTML);
            if (d == bookName[i].innerHTML) {
                // console.log("相等，退出循环");
                return;
            }
        }
        bookName.reverse();
        bookName.push("<option value='" + d + "'>" + d + "</option>");
        bookName.reverse();
        layui.form.render();
    }

    function clearTable() {
        $("#shujia").html("");
        $("#shujia").append("<option value='0'>全部</option>");
        $("#ceng").html("");
        $("#ceng").append("<option value='0'>全部</option>");
        $("#lie").html("");
        $("#lie").append("<option value='0'>全部</option>");
        $("#code").html("");
        $("#code").append("<option value='0'>全部</option>");
        formRender();
        layui.use('table', function () {
            // var d={code:"9877654"};
            // addSelect(d);
            var table = layui.table;
            var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                laydate = layui.laydate;
            var oldDate = new Array();
            table.reload('idTest', {
                data: oldDate
            });
            tDate = oldDate;
        });
    }

    layui.use('table', function () {
        var table = layui.table;
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //删除
            if (layEvent === 'delete') { //删除
                for (var i = 0; i < tDate.length; i++) {
                    if (data.code == tDate[i].code) {
                        tDate.splice(i, 1);
                    }
                }
                obj.del();
            }
        });
    });


    layui.use('form', function () {
        var form = layui.form;
        form.on('select(shujia)', function (data) {
            // clearTable();
            console.log("下拉框change事件触发了");
            layui.use('table', function () {
                var table = layui.table;
                var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                    laydate = layui.laydate;
                var oldDate = new Array();
                console.log("tDate长度=" + tDate.length);
                console.log("oldDate长度=" + oldDate.length);
                if (data.value == 0) {
                    oldDate = tDate;
                } else {
                    for (var i = 0; i < tDate.length; i++) {
                        console.log("正在循环中= " + tDate[i]);
                        if (data.value == tDate[i].left) {
                            console.log("正在添加= " + tDate[i]);
                            // oldDate.splice(i,1);
                            oldDate.push(tDate[i]);
                        }
                    }
                }
                // oldDate=table.cache.idTest;
                console.log("循环完成tDate长度=" + tDate.length);
                console.log("循环完成oldDate长度=" + oldDate.length);
                table.reload('idTest', {
                    data: oldDate
                });

            });
        });

        form.on('select(ceng)', function (data) {
            // clearTable();
            layui.use('table', function () {
                var table = layui.table;
                var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                    laydate = layui.laydate;
                var oldDate = new Array();
                if (data.value == 0) {
                    oldDate = tDate;
                } else {
                    for (var i = 0; i < tDate.length; i++) {
                        // console.log(tDate[i]);
                        if (data.value == tDate[i].center) {
                            // console.log("正在添加 : "+tDate[i]);
                            // oldDate.splice(i,1);
                            oldDate.push(tDate[i]);
                        }
                    }
                }
                // oldDate=table.cache.idTest;
                table.reload('idTest', {
                    data: oldDate
                });
            });
        });

        form.on('select(lie)', function (data) {
            // clearTable();
            console.log("触发了下拉框change事件=" + data.value);
            layui.use('table', function () {
                var table = layui.table;
                var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                    laydate = layui.laydate;
                var oldDate = new Array();
                if (data.value == 0) {
                    oldDate = tDate;
                } else {
                    for (var i = 0; i < tDate.length; i++) {
                        // console.log(tDate[i]);
                        if (data.value == tDate[i].right) {
                            console.log("正在添加 : " + tDate[i]);
                            // oldDate.splice(i,1);
                            oldDate.push(tDate[i]);
                        }
                    }
                }
                // oldDate=table.cache.idTest;
                table.reload('idTest', {
                    data: oldDate
                });
            });
        });

        form.on('select(tag)', function (data) {
            layui.form.render();
        });
        form.on('select(code)', function (data) {
            layui.use('table', function () {
                var table = layui.table;
                var layer = layui.layer, form = layui.form, table = layui.table, $ = layui.jquery,
                    laydate = layui.laydate;
                var oldDate = new Array();
                if (data.value == 0) {
                    oldDate = tDate;
                } else {
                    for (var i = 0; i < tDate.length; i++) {
                        // console.log(tDate[i]);
                        if (data.value == tDate[i].code) {
                            // console.log("正在添加 : "+tDate[i]);
                            // oldDate.splice(i,1);
                            oldDate.push(tDate[i]);
                        }
                    }
                }
                // oldDate=table.cache.idTest;
                table.reload('idTest', {
                    data: oldDate
                });
            });
        });

    })


    $("#btnClear").click(function () {
        clearTable();
    });

    $("#btnStart").click(function () {
        index = layer.load(2, {shade: false});
        $("#btnStart").addClass("layui-btn-disabled");
        $.ajax({
            url: 'startPandian',
            async: false,
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                    $("#btnStop").removeClass("layui-btn-disabled");
                    layer.close(index);
                } else {
                    layer.close(index);
                    layer.alert("扫描设备开启失败");
                    $("#btnStart").removeClass("layui-btn-disabled");
                }
            },
            error: function (res) {
                layer.close(index);
                layer.alert("系统发生错误");
                $("#btnStart").removeClass("layui-btn-disabled");
            }
        });
    });


    $("#btnStop").click(function () {
        $.ajax({
            url: 'CloseRfidReaderDervice',
            success: function (res) {
                if (res.code == 0) {
                    $("#btnStop").addClass("layui-btn-disabled");
                    $("#btnStart").removeClass("layui-btn-disabled");
                }
            },
            async: true
        });
    });

    //from 重新渲染
    function formRender() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }

    window.onload = function () {
        $(".layui-select-title").on("click", "input", function () {
            this.value = "";
        });
        // test();
        // test1();
        // test2();

    }


    $("#out").click(function () {
        layer.confirm('确定要退出吗？', function (index) {
            //向服务端发送删除指令
            ws.close();
            $.ajax({
                url: 'closeChrome',
                async: false,
                success: function (res) {
                }
            });
            layer.close(index);
        });
    })


    function test() {
        var d = {
            isbn: '1234567890123',
            code: '1234567',
            type: 'Z164',
            bookName: '钢铁是怎么练成的',
            price: '13.56',
            selectNumber: 'Z164/58',
            location: '1号书架A面2层3列',
            left: '1号书架A面',
            center: '2层',
            right: '3列'
        };
        addTr(d);
        addCode(d.code);
        addshujia(d.left);
        addCeng(d.center);
        addLie(d.right);
    }

    function test1() {
        var d = {
            isbn: '1234567890123',
            code: '1111111',
            type: 'Z164',
            bookName: '钢铁是怎么练成的',
            price: '13.56',
            selectNumber: 'Z164/58',
            location: '2号书架B面3层5列',
            left: '2号书架B面',
            center: '3层',
            right: '5列'
        };
        addTr(d);
        addCode(d.code);
        addshujia(d.left);
        addCeng(d.center);
        addLie(d.right);
    }

    function test2() {
        var d = {
            isbn: '1234567890123',
            code: '2222222',
            type: 'Z164',
            bookName: '钢铁是怎么练成的',
            price: '13.56',
            selectNumber: 'Z164/58',
            location: '3号书架A面4层5列',
            left: '3号书架A面',
            center: '4层',
            right: '5列'
        };
        addTr(d);
        addCode(d.code);
        addshujia(d.left);
        addCeng(d.center);
        addLie(d.right);
    }

</script>
<script type="text/html" id="barDemo1">
    <button class="layui-btn">已放置</button>
</script>
<script type="text/html" id="indexID">
    {{ d.LAY_INDEX }}
</script>
</body>
</html>